<template>
  <div class="itemOuter">
    <h2>全部分类</h2>
    <div class="typeList">
    <Item title="篮球">
      <template #default>
        <img src="./assets/1.gif" style="width: 100%">
      </template>

      <template v-slot:footer>
        <a href="https://baike.baidu.com/item/%E5%BE%B7%E9%87%8C%E5%85%8B%C2%B7%E7%BD%97%E6%96%AF/2862891?fr=kg_general">Rose</a>
      </template>
    </Item>
    <Item title="否定">
     <template #default>
       <ul>
         <li>ok</li>
         <li>no</li>
         <li>yes</li>
       </ul>
     </template>

      <template v-slot:footer>
        <p>No</p>
      </template>
    </Item>
    <Item title="瓜老板">
      <template>
        <img src="./assets/1.png" style="width: 100%">
      </template>

      <template v-slot:footer>
        <button>瓜哥</button>
      </template>
    </Item>
    </div>
  </div>
</template>


<script>
import Item from "@/components/Item";
export default {
  name:"App",
  components: {Item},
}
</script>


<style scoped>
.typeList {
  display: flex;
  justify-content: space-around;
}
</style>